import React, { Component } from 'react';
import CubeFace from './cubeFace';
import './cube.css';

class RubikFace extends Component {
  render () {
    return (
      <table>
      <tbody>
      <tr className={'trStyle_cube'}>
        <td><CubeFace no={0} color={this.props.color[0]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={1} color={this.props.color[1]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={2} color={this.props.color[2]} setColor={this.props.setCubeace}/></td>
      </tr>
      <tr className={'trStyle_cube'}>
        <td><CubeFace no={3} color={this.props.color[3]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={4} color={this.props.color[4]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={5} color={this.props.color[5]} setColor={this.props.setCubeace}/></td>
      </tr>
      <tr className={'trStyle_cube'}>
        <td><CubeFace no={6} color={this.props.color[6]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={7} color={this.props.color[7]} setColor={this.props.setCubeace}/></td>
        <td><CubeFace no={8} color={this.props.color[8]} setColor={this.props.setCubeace}/></td>
      </tr>
      </tbody>
      </table>
    )
  }
}

export default RubikFace;
